<template>
    <div class="info-content">
        <span class="up-page" @click="upPage">返回</span>
        <div class="info-body">
            <img :src="infoObj.url" alt="">
            <div class="info-body-text">
                <h4>{{ infoObj.titletext}}</h4>
                <p>{{ infoObj.contenttext }}</p>
                <div>
                    <h5>{{ infoObj.price}}</h5>
                    <button>添加到购物车</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            params:this.$route.params,
            infoObj:""
        }
    },
    methods:{
        getInfo(){
            this.$axios.get(`/recomendInfo/${this.params.id}`).then( ({ data }) => {
                this.infoObj = data.data
                console.log(this.infoObj)
            })
        },
        upPage(){
            this.$router.go(-1)
        }
    },
    created(){
        this.getInfo()
    }
}
</script>

<style lang="less" scoped>
.info-content{
    .up-page{
        position: fixed;
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        border-radius: 15px;
        background: #000;
        opacity: .4;
        color: #fff;
    }
    .info-body-text{
        padding: 0 5px;
        div{
            display: flex;
            justify-content: space-between;
            h5{
                color: red;
                font-weight: bold;
            }
            span{
                border: 1px solid red;
                height: 20px;
                padding: 3px;
            }
        }
    }
}
</style>
